@media screen and (max-width: 1047px) {
  .banner {
    .left {
      .title {
        font-size: 40px;
      }
    }
  }
  main {
    .article_item {
      width: 700px;
    }
  }
  footer {
    .main {
      width: 700px;
    }
  }
}
@media screen and (max-width: 985px) {
  .banner {
    transform: translate(0, 0);
    .left {
      width: 100%;
    }
    .right {
      text-align: center;
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
}
@media screen and (max-width: 763px) {
  header {
    .left {
      width: 100%;
      text-align: center;
    }
    .right {
      transform: translate(-200%, 0);
      z-index: 999;
      position: absolute;
      float: none;
      width: 60%;
      height: 100vh;
      background: #fff;
      transition: all 0.2s;
      // pointer-events: none;
      .a_item {
        display: block;
        margin-top: 20px;
        margin-left: 20px;
      }
      .a_item:nth-child(1) {
        margin-top: 50px;
      }
      .switch {
        position: absolute;
        right: 30%;
      }
      .switch::before {
        content: "";
        position: absolute;
        top: 0;
        width: 50px;
        height: 20px;
        background: #4d4d4d;
        border-radius: 20px;
      }
      .switch::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .switch:checked::before {
        background: #000;
      }
      .switch:checked::after {
        left: 30px;
      }
    }
    .menu {
      display: block;
    }
  }
  .cube div {
    width: 50px;
    height: 50px;
  }
}
@media screen and (max-width: 810px) {
  main {
    .article_item {
      padding: 0px 20px;
      width: 100%;
    }
  }
  footer {
    width: 100%;
    .main {
      padding: 0px 20px;
      width: 100%;
    }
  }
}
@media screen and (max-width: 500px) {
  header {
    .left {
      .logo {
        img {
          margin-top: 15px;
          width: 30px;
          height: 30px;
        }
        h3 {
          transform: translate(5px, -10px);
          font-size: 16px;
        }
      }
    }
  }
  .banner {
    margin-bottom: 150px;
    .left {
      padding: 0;
      padding-top: 70px;
      .title {
        font-size: 30px;
      }
      .content {
        margin: 30px 0;
      }
      .icon {
        margin-top: 40px;
      }
    }
  }
}
@media screen and (max-width: 405px) {
  .comments_list {
    .comments_list_item {
      .comments_item_right {
        margin-left: 10px;
        flex: 1;
        padding-top: 10px;
        font-size: 12px;
        .comments_name {
          color: #333;
        }
        .comments_name_icon {
          width: 15px !important;
          height: 15px !important;
          color: #fff;
          text-align: center;
          line-height: 15px !important;
          font-size: 12px !important;
          display: inline-block;
          background-image: -webkit-linear-gradient(
            0deg,
            #3ca5f6 0%,
            #a86af9 100%
          );
        }
        .comments_email {
          margin-left: 5px !important;
          color: #333;
        }
        .comments_date {
          margin-left: 5px !important;
          color: #333;
        }
        .comments_content {
          color: #333;
        }
      }
    }
  }
}
